<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型边框</title>

    <style>
        .one{
            width: 100px;
            height: 100px;
            border-top: 1px solid red;
            border-bottom: 5px double blue;
            border-left: 1px solid tomato;
            border-right: tomato 5px dashed;
        }


        .two{
            margin-top: 10px;
            width: 100px;
            height: 100px;
            border-top-style: solid;
            border-top-color: #000;
            border-top-width: 5px;
            border-left-style: solid;
            border-left-width: 5px;
        }

        /*同时设置四个边的样式 颜色  宽度*/
        .three{
            width: 100px;
            height: 100px;
            margin-top: 20px;
            border-style: solid;
            border-color: tomato;
            border-width: 10px;
        }

        .four{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-top: 20px;
        }


    </style>


</head>
<body>



<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

</body>
</html>